			//
			var tempId; //用来记录修改的那条数据的id(通过这个id可以知道我们修改了那条数据)
			var arrStr; //
			var arr=[]; //用来存放从渲染 页面获取到的数据
			
			;(function() {
				//第一步，通过document.getElementById的方法获取到dom对象
				var prompt = document.getElementById("prompt");
				var user = document.getElementById("user");
				var age = document.getElementById("age");
				var sexIpts = document.querySelectorAll("div#sex input[type='radio']")
				//console.log("sexIpts:",sexIpts);
				var hobIpts = document.querySelectorAll("div#hobby input[type='checkbox']");
				//console.log("hobIpts:",hobIpts);
				var edu = document.getElementById("edu");

				var add = document.getElementById("add");
				var updf = document.getElementById("updf");
				
				
				//？？？
				//获取到存储在localStorage的数据
				console.log("localStorage.arrStr:", localStorage.arrStr, typeof localStorage.arrStr);
				//
				//如果localStorage存在数据且数据不为null
				if(localStorage.arrStr&&localStorage.arrStr!="null") {
					console.log("1111111111111111");
					//把数据赋值给arrStr
					arrStr = localStorage.arrStr;
					//把获取到的字符串通过JSON.parse()方法变成数组
					arr = JSON.parse(arrStr);
					console.log("666arr:",arr);
				} else {
					console.log("222222");
					arr = [];
					console.log("8777arr:",arr);
				}
				console.log("8888arr:",arr);
				//调用showPage(arr)函数；在js中找到这个函数
				s(arr);

			}());
			
			
			//修改数据:步骤二
			//点击updf（确认修改）按钮时启动事件
			updf.onclick = function() {
				//？？？
				var userName = user.value.trim();
				var ageV = age.value.trim();
				if(userName && ageV) {
					var obj = { //创建一个对象,用来存储每次添加的信息
						id: tempId,
						user: userName,
						age: ageV,
						sex: getSex(), //获取性别
						hobby: getHobby(),
						edu: edu.value
					}
					//将json字符串 存储到localStroage中
					var arrStr = localStorage.arrStr;
					//JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。
					var arr = JSON.parse(arrStr);
					//遍历数组的每一项
					for(var i = 0; i < arr.length; i++) {
						if(arr[i].id == tempId) {
							//splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,
							//并以数组形式返回被修改的内容。
							arr.splice(i, 1, obj);
						}
					}
					//console.log("新的arr:",arr);

					var arrStr = JSON.stringify(arr); //将数组转化为json字符串
					localStorage.arrStr = arrStr; //将json字符串 存储到localStroage中

					s(arr); //渲染页面
					clearValue(); //清空输入部分

					//切换按钮
					var add = document.getElementById("add");
					var updf = document.getElementById("updf");

					add.style.display = "inline-block";
					updf.style.display = "none";

				} else {
					prompt.innerHTML = "数据有误,请检查!";
				}
			}

			/////////////////////////////////////////////
			//开启隔行变色
			//通过document.getElementById先获取到dom对象
			var oddColor = document.getElementById("oddColor");
			var tab = document.getElementById("tab");
			//添加点击事件
			oddColor.onclick = function() {
				//console.log("this.innerHTML",this.innerHTML);
				
				//？？？
				if(this.innerHTML == "开启隔行变色") {
					this.innerHTML = "关闭隔行变色"
				} else {
					this.innerHTML = "开启隔行变色"
				}
				tab.classList.toggle("tog");
			}
			
			//开启移入变色
			/*
			 onmouseeneter与onmouseleave  不支持冒泡
			 
			 onmouseover与onmouseout  支持冒泡
			 
			 * */

			var enterColor = document.getElementById("enterColor");
			
			enterColor.onclick = function() {
				
				if(this.innerHTML == "开启移入变色") {
					this.innerHTML = "关闭移入变色";

					/////////
					//事件委托
					var oldColor;
					tab.onmouseover = function(ev) {
						var ev = ev || window.event;
						var target = ev.target || ev.srcElement;
						//console.log("target.nodeName.toLowerCase():",target.nodeName.toLowerCase());
						if(target.nodeName.toLowerCase() == "td") {
							var tr = target.parentNode; //父元素
						} else if(target.nodeName.toLowerCase() == "a") {
							var tr = target.parentNode.parentNode; //找到tr
						}
						tr.style.backgroundColor = "green";
					}
					tab.onmouseout = function(ev) {
						var ev = ev || window.event;
						var target = ev.target || ev.srcElement;
						//console.log("target.nodeName.toLowerCase():",target.nodeName.toLowerCase());
						if(target.nodeName.toLowerCase() == "td") {
							var tr = target.parentNode; //父元素
						} else if(target.nodeName.toLowerCase() == "a") {
							var tr = target.parentNode.parentNode; //找到tr
						}

						tr.style.backgroundColor = "";
					}
					/////////

				} else {
					this.innerHTML = "开启移入变色";
					tab.onmouseover = null; //清除tab上的mouseover事件
					tab.onmouseout = null; //清除tab上的mouseout事件

				}
			}

			//按年龄升序排
			var ageSort = document.getElementById("ageSort");
			ageSort.onclick = function() {
				var arrStr = localStorage.arrStr;
				var arr = JSON.parse(arrStr);
				arr.sort(function(a, b) {
					return a.age - b.age
				});
				//console.log("排序后:",arr);
				showPage(arr); //渲染页面
			}

			//按姓名查找
			var search = document.getElementById("search");
			var searchBtn = document.getElementById("searchBtn");
			searchBtn.onclick = function() {
				var searchV = search.value;
				console.log("searchV:", searchV);
				var arrStr = localStorage.arrStr;
				var arr = JSON.parse(arrStr);
				if(searchV != "") {
					prompt.innerHTML = "";
					var arrNew = [];
					for(var i = 0; i < arr.length; i++) {
						console.log("arr[i]:", arr[i].user);
						if(arr[i].user.indexOf(searchV) != -1) {
							arrNew.push(arr[i]);
						}
					}
					if(arrNew.length == 0) {
						prompt.innerHTML = "没有您要找的数据!";
					} else {
						showPage(arrNew); //渲染页面
					}

				} else {
					showPage(arr); //渲染页面
				}
			}

			//全部清除
			var clearAll = document.getElementById("clearAll");
			clearAll.onclick = function() {
				localStorage.arrStr = null;
				showPage([]); //渲染页面
			}

			add.onclick = function() {
				console.log("0000000000000000", arr);
				var userName = user.value.trim();
				var ageV = age.value.trim();
				prompt.innerHTML = "";
				if(userName && ageV) {
					var obj = { //创建一个对象,用来存储每次添加的信息
						id: getId(), //将时间戳做为id(唯一性)
						user: userName,
						age: ageV,
						sex: getSex(), //获取性别
						hobby: getHobby(),
						edu: edu.value
					}
					//console.log("obj:",obj);
					//arr.push(obj);//将先增加的对象添加的数组中
					if(localStorage.arrStr && localStorage.arrStr != "null") {
						arrStr = localStorage.arrStr;
						arr = JSON.parse(arrStr);
					}
					console.log("99arr:", arr);
					arr.unshift(obj);
					var arrStr = JSON.stringify(arr); //将数组转化为json字符串
					localStorage.arrStr = arrStr; //将json字符串 存储到localStroage中
					showPage(arr); //渲染页面
					clearValue(); //清空输入部分
				} else {
					prompt.innerHTML = "数据有误,请检查!";
				}
			}

			//获取行内和非行内样式
			//本案例(没有用到)
			function getStyle(obj, name) {
				if(obj.currentStyle) { //在IE下
					return obj.currentStyle[name];
				} else { //非IE
					return getComputedStyle(obj, null)[name];
					//return getComputedStyle(obj,false)[name];
				}
			}

			//清空输入部分
			function clearValue() {
				var user = document.getElementById("user");
				var age = document.getElementById("age");
				var sexIpts = document.querySelectorAll("div#sex input[type='radio']");
				var edu = document.getElementById("edu");

				user.value = age.value = edu.vlaue = "";

				sexIpts[0].checked = true;

				allCheck(false);
			}

			function allCheck(f) {
				var hobIpts = document.querySelectorAll("div#hobby input[type='checkbox']");
				for(var i = 0; i < hobIpts.length; i++) {
					hobIpts[i].checked = f;
				}
			}

			//渲染页面
			function showPage(arr) {
				//如果arr为true，执行arr,若为false则执行arr=[]
				arr ? arr : arr = [];
				console.log("渲染页面拿到arr:", arr);
				var len = arr.length;
				//获取到trth和tab这两个dom对象
				var trth = document.querySelector("thead#trth");
				var tab = document.getElementById("tab");
				
				//如果获取的数组长度为0，清空原来数据，设置trth的display属性为隐藏
				if(len == 0) {
					tab.innerHTML = ""; //清空原来数据
					trth.style.display = "none";
				} else {
					//若数组长度不为0，遍历数据，把每个获取的数据添加到teth字符串中
					
					trth.style.display = "table-header-group";
					var trtd = "";
					for(var i = 0; i < arr.length; i++) {
						///////
						//*** 根据静态数据和动态数据，把动态数据添加进来
						trtd += `
							<tr>
								<td>${arr[i].user}</td>
								<td>${arr[i].age}</td>
								
								<td>${arr[i].sex=="0"?"先生":"女士"}</td>
								
								<td>${setHobby(arr[i].hobby)}</td>
								<td>${setEdu(arr[i].edu)}</td>
								<td>
									<a onclick=upd(${JSON.stringify(arr[i])})>修改</a>
									<a onclick=del(${arr[i].id})>删除</a>
								</td>
							</tr>
						`;
						///////
						//动态数据添加${ }，花括号里添加动态数据
						//三目运算符，如果sex=="0",则输出'先生'，否则是'女士'
						//通过setHobby()函数设置爱好，通过setEdu()函数设置学历
					}
					//把动态数据trtd添加到tab里
					tab.innerHTML = trtd;
	
				}

			}

			//修改数据:步骤一
			function upd(obj) {
				//console.log("要修改数据的对象:",obj);
				var user = document.getElementById("user");
				var age = document.getElementById("age");
				var edu = document.getElementById("edu");
				var sexIpts = document.querySelectorAll("div#sex input[type='radio']");
				var hobIpts = document.querySelectorAll("div#hobby input[type='checkbox']");

				user.value = obj.user;
				age.value = obj.age;
				edu.value = obj.edu;

				//选中性别
				if(obj.sex == "0") {
					sexIpts[0].checked = true;
				} else {
					sexIpts[1].checked = true;
				}

				//选中爱好
				for(var i = 0; i < hobIpts.length; i++) {
					hobIpts[i].checked = false;
					for(var j = 0; j < obj.hobby.length; j++) {
						if(hobIpts[i].value == obj.hobby[j]) {
							hobIpts[i].checked = true;
						}
					}
				}

				//切换按钮
				var add = document.getElementById("add");
				var updf = document.getElementById("updf");

				add.style.display = "none";
				updf.style.display = "inline-block";

				//记录修改的那条数据的id
				tempId = obj.id;

			}

			//根据id,删除数据
			function del(id) {
				//console.log("要删除数据的id:",id);
				var arrStr = localStorage.arrStr;
				var arr = JSON.parse(arrStr);
				for(var i = 0; i < arr.length; i++) {
					//console.log("arr[i]:",arr[i].id);
					if(arr[i].id == id) {
						arr.splice(i, 1); //删除功能,
					}
				}

				var arrStr = JSON.stringify(arr); //将数组转化为json字符串
				localStorage.arrStr = arrStr; //将json字符串 存储到localStroage中
				showPage(arr); //渲染页面

			}

			//设置爱好
			function setHobby(arr) {
				//console.log("爱好:",arr);
				var hobbyObj = {
					h1: "电影",
					h2: "唱歌",
					h3: "游泳",
					h4: "学习",
					h5: "健身"
				}
				var strHobby = "";
				for(var i = 0; i < arr.length; i++) {
					strHobby += hobbyObj[arr[i]] + " ";
				}
				return strHobby;
			}

			//设置学历
			function setEdu(str) {
				//console.log("str:",str);
				var eduObj = {
					e1: "小学",
					e2: "中学",
					e3: "高中",
					e4: "大学",
					e5: "硕士"
				}
				//console.log("教育程度:",eduObj[str]);
				return eduObj[str]
			}

			//获取爱好
			function getHobby() {
				var hobIpts = document.querySelectorAll("div#hobby input[type='checkbox']");
				//console.log("hobIpts:",hobIpts);
				var arr = [];
				for(var i = 0; i < hobIpts.length; i++) {
					if(hobIpts[i].checked) {
						arr.push(hobIpts[i].value);
					}
				}
				return arr;
			}

			//获取性别
			function getSex() {
				var sexIpts = document.querySelectorAll("div#sex input[type='radio']")
				//console.log("sexIpts:",sexIpts);
				if(sexIpts[0].checked) {
					return sexIpts[0].value;
				} else {
					return sexIpts[1].value;
				}
			}

			//返回一个时间戳
			function getId() {
				return new Date().getTime() + "";
			}